<template>
  <div class="header">
    <!-- 是否展开侧边栏 -->
    <div class="header-title" @click="foldOrOpen">
      <a class="el-icon-s-fold" v-if="foldAside" title="折叠侧边栏" />
      <a class="el-icon-s-unfold" v-else title="展开侧边栏" />
    </div>
    <!-- 设置、文档、用户设置等 -->
    <div class="header-menu">
      <el-menu mode="horizontal" class="header-menu-submenu">
        <!-- 用户设置 -->
        <el-submenu title="用户设置" index="3">
          <template slot="title">
                        <span class="header-span">
                            <img src="../../assets/img/QQ图片20200925154058.jpg">
                          {{ username }}
                        </span>
          </template>
          <el-menu-item index="3-2" @click="logout">
            <i class="el-icon-close"></i>退出
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      // 是否展开侧边栏
      foldAside: true,
      // 默认用户名
      userName: 'admin',
      username: localStorage.getItem("username")
    }
  },
  methods: {
    // 展开、折叠侧边栏
    foldOrOpen () {
      this.foldAside = !this.foldAside
      // this.$emit 用于触发父组件的方法，并传递参数值
      this.$emit('foldOrOpenAside', this.foldAside)
    },
    logout () {
      // TODO：退出逻辑待完成
      localStorage.removeItem("username")
      this.$router.push({
        name: 'login'
      })
    }
  }
}
</script>

<style>
  .header {
    padding: 0 10px;
    display: flex;
    height: 50px;
    line-height: 50px;
  }

  .header-title {
    height: 50px;
    width: 50px;
    float: left;
    font-size: 50px;
    cursor: pointer;
  }

  .header-menu {
    height: 50px;
    width: 100%;
    flex: 1;
    line-height: 50px;
    font-size: 30px;
  }
  .header-menu-submenu {
    float: right;
  }
  .header-submenu-a {
    text-decoration: none;
    color: #4CC4B8;
    font-weight: bold;
    font-size: 16px;
  }
  .header-submenu-a:hover {
    background-color: #2C3E50;
  }
  .el-menu--horizontal>.el-menu-item,
  .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 50px !important;
    line-height: 50px !important;
  }
  .el-menu--collapse .el-menu .el-submenu, .el-menu--popup {
    min-width: auto !important;
  }
  .header-span img {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 5px 10px 10px 10px;
  }
  .header-span {
    font-size: 20px;
  }
</style>
